<template>
  <div class="divide-policy">
    <Card class="userCard">
      <Form :model="form">
        <Row gutter="30">
          <i-col span="6">
            <FormItem>
              <Select v-model="form.riskcodeid" placeholder="险种名称" clearable filterable>
                <Option :value="item.riskcode" v-for="item in riskList" :key="item.riskcode">{{
                  item.riskcode
                }}-{{ item.riskname }}</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col span="8">
            <FormItem>
              <Button type="primary" @click="queryPolicy(1)" :loading="queryLoading"
                style="margin-right: 20px">查询</Button>
              <Button type="primary" @click="addPolicy">新增</Button>
            </FormItem>
          </i-col>
        </Row>
      </Form>
      <!-- 表格 -->
      <Table :columns="columns1" :data="data1">
        <template slot-scope="{ row }" slot="riskname">
          {{ row.riskcodeid }}-{{ row.riskname }}
        </template>
        <template slot-scope="{ row }" slot="articlename">
          <div style="display: flex; justify-content: center;align-items: center;">
            {{ row.articlename }}
            <div class="bg" @click="downLoad(row.articleurl, row.articlename)">
              <Icon type="md-download" color="#FFFFFF" />
            </div>
          </div>
        </template>
        <template slot-scope="{ row }" slot="planname">
          <div style="display: flex; justify-content: center;align-items: center;">
            {{ row.planname || '-' }}
            <div class="bg" v-if="row.planname" @click="downLoad(row.planurl, row.planname)">
              <Icon type="md-download" color="#FFFFFF" />
            </div>
          </div>
        </template>
        <template slot-scope="{ row }" slot="operate">
          <Button type="primary" @click="editPolicy(row)">修改</Button>
          <Button type="primary" @click="delPolicy(row)">删除</Button>
        </template>
      </Table>

      <!-- 分页 -->
      <Row>
        <i-col span="24" style="text-align: right; margin-top: 20px">
          <Page :total="total" show-total @on-change="pageChange" :current="pageIndex" :page-size="pageSize" />
        </i-col>
      </Row>
      <Button type="primary" @click="info" v-if="false"></Button>
    </Card>
    <Modal footer-hide="true" :value="showModal" :mask-closable="false" @on-visible-change="visibleChange" width="750">
      <span slot="header" style="color: #fff; font-size: 16px">新增产品配置</span>
      <div style="margin: 0 60px;">
        <Form :model="addform">
          <FormItem label="险种名称:">
            <Row>
              <i-col span="18">
                <Select v-model="addform.riskcodeid" placeholder="险种名称" clearable filterable @on-change="changeSelect"
                  :label-in-value="true">
                  <Option v-for="item in nRiskList" :value="item.riskcode" :key="item.riskcode">{{
                    item.riskcode
                  }}-{{ item.riskname }}</Option>
                </Select>
              </i-col>
            </Row>
          </FormItem>
          <FormItem label="产品条款:">
            <Row :gutter="20">
              <i-col>
                <span>{{ addform.articlename }}</span>
              </i-col>
              <i-col>
                <Uploadv action="/scrm-gateway/scrm-uer/rest/Imrisk/upload" :before-upload="handleUpload" ref="upload1"
                  :show-upload-list="false" :format="['doc', 'docx', 'pdf']" :on-format-error="formatError1"
                  :on-success="uploadSuccess" :on-error="uploadFail" :headers="{
                    Authorization: tocken,
                  }" name="multipartFile" :data="{ riskcodeid: this.addform.riskcodeid, type: 1, }">
                  <Button type="primary"><span v-if="addform.articlename">重新</span>上传</Button>
                </Uploadv>
              </i-col>
            </Row>
          </FormItem>
          <FormItem label="产品计划书:">
            <Row :gutter="20">
              <i-col>
                <span>{{ addform.planname }}</span>
              </i-col>
              <i-col>
                <Uploadv action="/scrm-gateway/scrm-uer/rest/Imrisk/upload" :before-upload="handleUpload2" ref="upload2"
                  :show-upload-list="false" :format="['xls', 'xlsx']" :on-format-error="formatError"
                  :on-success="uploadSuccess" :on-error="uploadFail" :headers="{
                    Authorization: tocken,
                  }" name="multipartFile" :data="{ riskcodeid: this.addform.riskcodeid, type: 2, }">
                  <Button type="primary"><span v-if="addform.planname">重新</span>上传</Button>
                </Uploadv>
              </i-col>
            </Row>
          </FormItem>
          <Row type="flex" justify="center">
            <i-col span="6">
              <FormItem>
                <Button type="primary" @click="addUerPictueImrisk" :loading="queryLoading"
                  style="margin-right: 20px">保存</Button>
                <Button type="primary" @click="showModal = false">取消</Button>
              </FormItem>
            </i-col>
          </Row>
        </Form>
      </div>
    </Modal>
    <Modal footer-hide="true" :value="showEditModal" :mask-closable="false" @on-visible-change="visibleEditChange"
      width="750">
      <span slot="header" style="color: #fff; font-size: 16px">修改产品配置</span>
      <div style="margin: 0 60px;">
        <Form>
          <FormItem label="险种名称:">
            <Row>
              <i-col span="18">
                {{ updateform.riskcodeid }}-{{ updateform.riskname }}
              </i-col>
            </Row>
          </FormItem>
          <FormItem label="产品条款:">
            <Row :gutter="20">
              <i-col>
                <span>{{ addform.articlename }}</span>
              </i-col>
              <i-col>
                <Uploadv action="/scrm-gateway/scrm-uer/rest/Imrisk/upload" :before-upload="handleUpload" ref="upload3"
                  :show-upload-list="false" :format="['pdf', 'doc', 'docx']" :on-format-error="formatError1"
                  :on-success="uploadSuccess" :on-error="uploadFail" :headers="{
                    Authorization: tocken,
                  }" name="multipartFile" :data="{ riskcodeid: this.updateform.riskcodeid, type: 1, }">
                  <Button type="primary"><span v-if="addform.articlename">重新</span>上传</Button>
                </Uploadv>
              </i-col>
            </Row>
          </FormItem>
          <FormItem label="产品计划书:">
            <Row :gutter="20">
              <i-col>
                <span>{{ addform.planname }}</span>
              </i-col>
              <i-col>
                <Uploadv action="/scrm-gateway/scrm-uer/rest/Imrisk/upload" :before-upload="handleUpload2" ref="upload4"
                  :show-upload-list="false" :format="['xls', 'xlsx']" :on-format-error="formatError"
                  :on-success="uploadSuccess" :on-error="uploadFail" :headers="{
                    Authorization: tocken,
                  }" name="multipartFile" :data="{ riskcodeid: this.updateform.riskcodeid, type: 2, }">
                  <Button type="primary"><span v-if="addform.planname">重新</span>上传</Button>
                </Uploadv>
              </i-col>
            </Row>
          </FormItem>
          <Row type="flex" justify="center">
            <i-col span="6">
              <FormItem>
                <Button type="primary" @click="editUerPictueImrisk" :loading="queryLoading"
                  style="margin-right: 20px">保存</Button>
                <Button type="primary" @click="showEditModal = false">取消</Button>
              </FormItem>
            </i-col>
          </Row>
        </Form>
      </div>
    </Modal>
  </div>
</template>
<script>
import { exportFile } from "../../util/util"
export default {
  data() {
    const validateMonth = (rule, value, callback) => {
      let regstr = /^(?:1[0-2]|[1-9])$/;
      if (regstr.test(value)) {
        callback();
      } else {
        callback(new Error("请输入1-12的整数"));
      }
      callback();
    };
    return {
      // 当前页码
      pageIndex: 1,
      // 每页记录数量
      pageSize: 10,
      //  总数量
      total: 0,
      pageObj: null,
      form: {
        riskcodeid: "",
      },
      // 表格数据
      columns1: [
        {
          title: "序号",
          width: "100",
          align: "center",
          type: "index",
        },
        {
          title: "险种",
          slot: "riskname",
          width: "300",
          align: "center",
        },
        {
          title: "条款",
          slot: "articlename",
          width: "300",
          align: "center",
        },
        {
          title: "计划书",
          width: "300",
          slot: "planname",
          align: "center",
        },
        {
          title: "操作",
          slot: "operate",
          align: "center",
        },
      ],
      showModal: false,
      showEditModal: false,
      riskList: null,
      nRiskList: null,
      data1: [],
      addform: {
        riskname: '',
        riskcodeid: '',
        articlename: '',
        articleid: '',
        planname: '',
        planid: '',
      },
      updateform: {
        riskname: '',
        riskcodeid: '',
        articlename: '',
        articleid: '',
        planname: '',
        planid: '',
      }
    };
  },
  methods: {
    info(tip) {
      this.$Message.warning(tip);
    },
    //查询
    queryPolicy(pageIndex) {
      // this.queryLoading = true;
      let obj = {
        riskcodeid: this.form.riskcodeid || '',
      };
      obj.index = pageIndex;
      obj.pageSize = this.pageSize;
      this.pageIndex = pageIndex
      this.api.queryUerPictueImrisk(obj).then((res) => {
        if (res.code == 200 && res.data) {
          this.queryLoading = false;
          this.data1 = res.data.records;
          this.total = res.data.total;
        } else {
          this.data1 = [];
          this.queryLoading = false;
        }
      })
        .catch((e) => {
          this.data1 = [];
          this.queryLoading = false;
          this.$Message.error("请求异常");
        });
    },
    // 修改
    editPolicy(row) {
      console.log(row,'row');
        this.updateform.riskcodeid = row.riskcodeid
        this.updateform.riskname = row.riskname
        this.addform.articlename = row.articlename
        this.addform.articleid = row.articleid
        this.addform.planname = row.planname
        this.addform.planid = row.planid
        this.showEditModal = true
    },
    // 删除
    delPolicy(row) {
      console.log(row);
      this.$Modal.confirm({
        title: '确认',
        content: '您确认删除当前产品配置？',
        loading: true,
        onOk: () => {
          this.api.delectUerPictueImrisk({ delectId: row.id }).then(res => {
            if (res.code == 200) {
              this.queryPolicy(1)
              this.$Message.success("删除成功");
            } else {
              this.$Message.error("删除失败");
            }
          }).catch((e) => {
            this.$Message.error("请求异常");
          });
          this.$Modal.remove()
        }
      })

    },
    // 保存
    addUerPictueImrisk() {
      let obj = {
        riskcodeid: this.addform.riskcodeid,
        articlename: this.addform.articlename,
        riskname: this.addform.riskname,
        articleid: this.addform.articlename ? '1' : '',
        planname: this.addform.planname,
        planid: this.addform.planname ? '2' : '',
      }
      if (!this.addform.riskcodeid) {
        this.$Message.error("请先选择险种");
        return
      } else if (!this.addform.articlename) {
        this.$Message.error("请上传产品条款");
        return
      }
      console.log(obj);
      this.addform.file && this.$refs.upload1.post(this.addform.file);
      this.addform.planfile && this.$refs.upload2.post(this.addform.planfile);
      this.api.addUerPictueImrisk(obj).then(res => {
        if (res.code == 200) {
          this.queryPolicy(1)
          this.showModal = false
          this.$Message.success("保存成功");
        } else {
          this.$Message.error("保存失败");
        }
      })
    },
    editUerPictueImrisk() {
      let obj = {
        riskcodeid: this.updateform.riskcodeid,
        articlename: this.addform.articlename,
        riskname: this.updateform.riskname,
        articleid: this.addform.file ? '1' : '',
        planname: this.addform.planname,
        planid: this.addform.planfile ? '2' : '',
      }
      console.log(obj);
      this.addform.file && this.$refs.upload3.post(this.addform.file);
      this.addform.planfile && this.$refs.upload4.post(this.addform.planfile);
      this.api.addUerPictueImrisk(obj).then(res => {
        if (res.code == 200) {
          this.queryPolicy(1)
          this.showEditModal = false
          this.$Message.success("保存成功");
        } else {
          this.$Message.error("保存失败");
        }
      })
    },
    // 保存需要上传的文件
    handleUpload(file) {
      let hz = file.name.split(".");
      let extra = hz[hz.length - 1]
      if (extra == "doc" || extra == "docx" || extra == "pdf") {
        this.addform.file = file
        this.addform.articlename = file.name
        return false;
      }
    },
    // 保存需要上传的文件
    handleUpload2(file) {
      let hz = file.name.split(".");
      let extra = hz[hz.length - 1]
      if (extra == "xls" || extra == "xlsx") {
        this.addform.planfile = file
        this.addform.planname = file.name
        return false;
      }
    },
    formatError() {
      this.$Message.error("只支持.xls、.xlsx文件！");
    },
    formatError1() {
      this.$Message.error("只支持.pdf、.doc、.docx文件！");
    },
    // 下载
    // downLoad(url,name){
    //   let arr = name.split(".");
    //   let ext = arr[arr.length - 1];
    //   if(ext == 'pdf'){
    //     const link = document.createElement("a");
    //   fetch(url)
    //     .then((res) => res.blob())
    //     .then((blob) => {
    //       // 将链接地址字符内容转变成blob地址
    //       link.href = URL.createObjectURL(blob);
    //       link.download = name.slice(0,name.length-4);
    //       document.body.appendChild(link);
    //       link.click();
    //       document.body.removeChild(link);
    //     });
    //   }else{
    //     window.open(url,'_parent')
    //   }

    // },
    downLoad(url) {
      console.log(url.split('?=')[1]);
      // return
      let obj = {
        id: url.split('?=')[1]
      };
      exportFile("scrm-gateway/scrm-uer/api/fileDownload/download", obj)
    },
    addPolicy() {
      this.showModal = true
      this.addform = {
        riskname: '',
        riskcodeid: '',
        articlename: '',
        articleid: '',
        planname: '',
        planid: '',
      }
      this.api.queryaddriskname().then(res => {
        if (res.code == 200 && res.data != null) {
          this.nRiskList = res.data
        } else {
        }
      })
    },
    changeSelect(e) {
      if (e) {
        this.addform.riskname = e.label.split('-')[1]
      }
    },
    visibleChange(e) {
      this.showModal = e;
    },
    visibleEditChange(e) {
      this.showEditModal = e;
    },
    pageChange(e) {
      this.pageIndex = e;
      this.queryPolicy(e);
    },
    // 进入页面初始化
    initialize() {
      this.api.queryriskname().then((res) => {
        if (res.code == 200 && res.data != null) {
          this.riskList = res.data
        } else {
        }
      });
      this.queryPolicy(1)
    },
    reset() {
      this.form = {
        branchType: "",
        manageCom: "",
        batchType: "",
        reAgentCode: "",
        agentGroup1: "",
        agentGroup2: "",
      };
      this.reagentNameList = [];
    },
  },
  mounted() {
    // 进入页面初始化
    this.queryPolicy(1);
    this.initialize()
  },
};
</script>
<style lang="less">
.ivu-modal-header {
  background-color: #2d8cf0 !important;
}

.divide-policy {
  .ivu-input-number {
    width: 100% !important;
  }
}

.divide-policy .ivu-input-number {
  width: 100%;
}
</style>

<style scoped lang="less">
@import "./user";

.ivu-modal-header {
  background-color: #2d8cf0;
}

.ivu-modal-close .ivu-icon-ios-close {
  color: #fff;
}

.stopClass>.ivu-modal {
  top: 0;
  left: 25px;
}

.addClass>.ivu-modal {
  top: 140px;
}

.updateClass>.ivu-modal {
  top: 140px;
}

.btngroup {
  width: 100%;
  display: flex;
  justify-content: center;
}

.btngroup .ivu-col-span-8 {
  display: inline-block;
  width: 100px;
}

.bg {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #19be6b;
  margin-left: 10px;
  text-align: center;
  flex-shrink: 0;
}
</style>

